
window.initCanvas = function (imageInfo) {

	// 
	// flow.js
	// <主要逻辑>
	//  
	// Created by DurantSimpson on 2016-12-08.
	// Copyright 2016 DurantSimpson. All rights reserved.
	// 
//	$("#imgeCanvas").hide();
//	return ;

	var canvas = document.getElementById ( "flowImageCanvas" );

	var nodeMap = imageInfo.nodeMap;
	var flowLocation = imageInfo.flowLocation;
	var stacks = imageInfo.stacks || [];
	
	// 设置画布宽高
    var minX = 10000;
    var minY = 10000;
    var maxX = 0;
    var maxY = 0;
	for(var i in nodeMap){
		var xyz = nodeMap[i];
		minX = Math.min(minX,xyz.x);
		minY = Math.min(minY,xyz.y);
		maxX = Math.max(maxX,xyz.x+xyz.width);
		maxY = Math.max(maxY,xyz.y+xyz.height);
	}
	
	for(var i in flowLocation){
		var flows = flowLocation[i];
		for(var j = 0 ; j < flows.length ; j++){
			var flowFrom = flows[j];
			minX = Math.min(minX,flowFrom.x);
			minY = Math.min(minY,flowFrom.y);
			maxX = Math.max(maxX,flowFrom.x+flowFrom.width);
			maxY = Math.max(maxY,flowFrom.y+flowFrom.height);
		}
	}
	canvas.width = maxX+minX + 20;
	canvas.height = maxY+minY + 20;
	
//	canvas.width =1000;
//	canvas.height =1000;
	window.canvas = canvas;
	window.cxt = canvas.getContext ( '2d' );
	window.ctx = window.cxt;
	
	// 画背景白色,否则复制出来是透明的
	cxt.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
	
	var flowElements = imageInfo.flowElements;
	
	getFlowElementsJson(flowElements,imageInfo);
	
	var flowElementJson = imageInfo.flowElementJson;
	
	// 注释相关
	var pools = imageInfo.pools || [];
	var lanes = imageInfo.lanes || [];
	var artifacts = imageInfo.artifacts || [];
	var boundaryEvents = imageInfo.boundaryEvents || [];
	
	pools.pushAll(lanes);
	pools.pushAll(artifacts);
	pools.pushAll(boundaryEvents);
	var nodeNameJson = {};
	for(var i = 0 ; i < pools.length ; i++){
		var p = pools[i];
		if(p["$ref"]){
			var $ = {data:imageInfo};
			p = eval("("+p["$ref"]+")");
		}
		nodeNameJson[p.id] = p;
	}
	
	var stackJson = {};
	var nodeTypeJson = {};
	var flowColorMap = {};
	var stackColorJson = {};
	var gateColorMap = {};
	var nodeColorMap = {};
	for(var i = 0 ; i < stacks.length ; i++){
		var stack = stacks[i];
		stackJson[stack.nodeId] = stack ;
		nodeTypeJson[stack.nodeId] = stack.nodeType ;
		var actionName = stack.actionName;
		stackColorJson[stack.nodeId] = getOpinionColar(actionName);
		if ("sequenceFlow" == (stack.nodeType)) {// 线集合，线的颜色应该跟父颜色一致
			if(actionName=="create") {
				actionName = "start";
			}
			flowColorMap[stack.nodeId] = getOpinionColar(actionName);
		} else if ("exclusiveGateway" == (stack.nodeType)) {// 网关集合
			gateColorMap[stack.nodeId] = getOpinionColar(actionName);
		} else {// 节点集合
			nodeColorMap[stack.nodeId] = getOpinionColar(actionName);
		}
	}
	// 绘制节点
	for(var i in nodeMap){
		var xyz = nodeMap[i];
		var nodeType = xyz.type || nodeTypeJson[i];
		var flowElement = flowElementJson[i] || nodeNameJson[i];
		var stack = stackJson[i] || {
			nodeName:flowElement.name || flowElement.text,
		};
		var color = nodeColorMap[i] || stackColorJson[i] || Color.DEFAULT;
		var xoffset = 3;
		var yoffset = -15;

		nodeType = getNodeType(nodeType,i);
		
		switch(nodeType){
			case "startEvent":
			case "endEvent":
				drawCircle ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height,  color );//
				break;
			case "subProcess":// 子流程
				drawSubProcess ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height , stack.nodeName ,"" , color );//
				break;
			case "callActivity": // 外部子流程
				drawCallActivity ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height , stack.nodeName ,"" , color );//
				break;
			case "textAnnotation":
				drawTextAnnotation ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, stack.nodeName,  color );//
				break;
			case "serviceTask": // 服务
				new Step ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height , stack.nodeName ,"serviceIcon" , color );//
				break;
			case "exclusiveGateway": // 分支网关
				drawExclusiveGateway ( xyz.x-xoffset , xyz.y-yoffset, stack.nodeName , color );
				break;
			case "parallelGateway": // 并行网关
				drawParallelGateway ( xyz.x-xoffset , xyz.y-yoffset, stack.nodeName , color );
				
//				stack.nodeName = "";
//				drawBoundaryTimer ( xyz.x-xoffset , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				drawStartSignalEvent ( xyz.x-xoffset + 40 , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				drawBoundarySignalEvent ( xyz.x-xoffset + 80 , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				drawEndErrorEvent ( xyz.x-xoffset + 120 , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				drawBoundaryErrorEvent ( xyz.x-xoffset + 160 , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				drawEndTerminateEvent ( xyz.x-xoffset + 200 , xyz.y-yoffset, 30, 30, color, stack.nodeName );//
//				
				
				break;
			case "inclusiveGateway": // 并行条件网关
				drawInclusiveGateway ( xyz.x-xoffset , xyz.y-yoffset, stack.nodeName , color );
				
				break;
			case "startTimer": // 定时开始节点
			case "boundaryTimer": // 定时事件边界
			case "catchTimer": // 定时等待节点
				drawBoundaryTimer ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "startSignal": // 信号开始事件
			case "boundarySignal": // 信号边界事件
			case "catchSignal": // 信号等待节点
				drawStartSignalEvent ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "throwSignal": // 信号抛出节点
				drawBoundarySignalEvent ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "endError": // 结束错误事件
				drawEndErrorEvent ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "boundaryError": // 错误边界事件
				drawBoundaryErrorEvent ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "endTerminate": // 结束终止事件
				drawEndTerminateEvent ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height, color, stack.nodeName );//
				break;
			case "pool": // 池
			case "lane": // 
				drawPool ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height , stack.nodeName ,"" , color );//
				break;
			case "userTask": // 用户任务
			default :
				new Step ( xyz.x-xoffset , xyz.y-yoffset, xyz.width, xyz.height , stack.nodeName ,"userIcon" , color );//
				break;
		}
		draLineTxt(xoffset,yoffset,flowElement,flowLocation,stackColorJson);
	}
	
	// 绘制线条
	for(var i in flowLocation){
		var stack = stackJson[i];
		var flows = flowLocation[i];
		var color = flowColorMap[i] || Color.DEFAULT;
		for(var j = 0 ; j < flows.length-1 ; j++){
			var flowFrom = flows[j];
			var flowTo = flows[j+1];
			var arrow = new Arrow(flowFrom.x-xoffset, flowFrom.y-yoffset , flowTo.x-xoffset, flowTo.y-yoffset);
			arrow.setColor(color);
			if(j==(flows.length-2)){
				arrow.setHead(true);
			}
			arrow.draw(ctx);
		}
	}
	

/*
 * canvas.onclick = function(e) { //给canvas添加点击事件 e = e || event; //获取事件对象
 * //获取事件在canvas中发生的位置 var x = e.clientX - canvas.offsetLeft; var y = e.clientY -
 * canvas.offsetTop; //如果事件位置在矩形区域中 alert('x:' + x + "y:" + y); if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){
 * alert('clicked') } }
 */
}

window.Color = {
		GREEN:"rgb(0, 255, 0)",
		success:"rgb(26, 179, 148)",
		PINK:"rgb(255, 175, 175)",
		BLUE:"rgb(0, 0, 255)",
		DARK_GRAY:"rgb(64, 64, 64)",
		todo:"rgb(237, 85, 101)",
		cancelled:"rgb(28, 132, 198)",
		RED:"rgb(255, 0, 0)",
		DEFAULT:"rgb(103, 106, 108)",
}

function getOpinionColar( action) {
	if (!action) {
		return Color.GREEN;
	}
	switch (action) {
		case "start":
			return Color.success;
		case "agree":
			return Color.success;
		case "signAgree":
			return Color.success;
		case "oppose":
			return Color.PINK;
		case "signOppose":
			return Color.PINK;
		case "reject":
			return Color.PINK;
		case "reject2Start":
			return Color.PINK;
		case "recover":
			return Color.PINK;
		case "dispense":
			return Color.BLUE;
		case "manualEnd":
			return Color.DARK_GRAY;
		case "recall":
			return Color.DARK_GRAY;
		case "create":
			return Color.todo;
		case "end":
			return Color.success;
		case "taskCancelled":
			return Color.cancelled;
		default:
			return Color.RED;
	}
}